<script setup>
import Statistics from '@/views/Statistics.vue';
import rcVillages from '@/assets/rcVillages.json';
import rcStreets from '@/assets/rcStreets.json';
import request from "@/utils/request";
import RCMap from "@/views/RCMap.vue";
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const loading = ref(true);
const form = ref({});
const dialogVisible = ref(false);
const search = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref([]);
const bookList = ref([]);
const roles = ref([]);
const address = ref({
  area: '荣成市',
  selectedStreet: {},
  selectedVillage: {},
  detail: '',
  nextVillages: []
});
address.value.rcVillages = rcVillages;
address.value.rcStreets = rcStreets;

const handleChange = (row) => {
  request.put("/user/changeRole", row).then(res => {
    if (res.code === '0') {
      // 假设 $message 是通过 app.config.globalProperties.$message 挂载的全局方法
      app.config.globalProperties.$message.success("更新成功");
      if (res.data) {
        router.push("/login");
      }
    }
  });
};

const load = () => {
  loading.value = true;
  request.get("/user", {
    params: {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      search: search.value
    }
  }).then(res => {
    loading.value = false;
    tableData.value = res.data.records;
    total.value = res.data.total;
  });

  request.get("/role/all").then(res => {
    roles.value = res.data;
  });
};

const handleUploadSuccess = (res) => {
  if (res.code === "0") {
    app.config.globalProperties.$message.success("导入成功");
    load();
  }
};

const exportUser = () => {
  location.href = "http://" + window.server.filesUploadUrl + ":9090/user/export";
};

const add = () => {
  dialogVisible.value = true;
  form.value = {};
  address.value.selectedStreet = {};
  address.value.selectedVillage = {};
};

const saveAddress = () => {
  let newAddress = address.value.area;
  if (Object.keys(address.value.selectedStreet).length === 0) {
    console.log('街道未选择，初始化为空串');
    newAddress += '- ';
  } else {
    console.log('街道已选择，不为空');
    newAddress += '-' + address.value.selectedStreet.name;
  }

  if (Object.keys(address.value.selectedVillage).length === 0) {
    console.log('村委会未选择，初始化为空串');
    newAddress += '- ';
  } else {
    console.log('村委会已选择');
    newAddress += '-' + address.value.selectedVillage.name;
  }

  if (address.value.detail === '') {
    console.log('详细地址未填写,初始化为空串');
    newAddress += '- ';
  } else {
    console.log('详细地址已填写');
    newAddress += '-' + address.value.detail;
  }

  console.log('新地址', newAddress);
  form.value.address = newAddress;
};

const save = () => {
  saveAddress();
  if (form.value.id) {
    request.put("/user", form.value).then(res => {
      if (res.code === '0') {
        app.config.globalProperties.$message({
          type: "success",
          message: "更新成功"
        });
      } else {
        app.config.globalProperties.$message({
          type: "error",
          message: res.msg
        });
      }
      load();
      dialogVisible.value = false;
    });
  } else {
    request.post("/user", form.value).then(res => {
      if (res.code === '0') {
        app.config.globalProperties.$message({
          type: "success",
          message: "新增成功"
        });
      } else {
        app.config.globalProperties.$message({
          type: "error",
          message: res.msg
        });
      }
      load();
      dialogVisible.value = false;
    });
  }
};

const handleEdit = (row) => {
  form.value = JSON.parse(JSON.stringify(row));
  loadAddress(row.address);
  dialogVisible.value = true;
};

const loadAddress = (addressStr) => {
  const addStr = addressStr.split('-');
  if (addStr[1] === ' ') {
    address.value.selectedStreet = {};
  } else {
    rcStreets.forEach(ele => {
      if (ele.name === addStr[1]) {
        address.value.selectedStreet = ele;
        onStreetChange();
      }
    });
  }

  if (addStr[2] === ' ') {
    address.value.selectedVillage = {};
  } else {
    rcVillages.forEach(ele => {
      if (ele.name === addStr[2]) {
        address.value.selectedVillage = ele;
      }
    });
  }

  if (addStr[3] === ' ') {
    address.value.detail = '';
  } else {
    address.value.detail = addStr[3];
  }
};

const handleDelete = (id) => {
  request.delete("/user/" + id).then(res => {
    if (res.code === '0') {
      app.config.globalProperties.$message({
        type: "success",
        message: "删除成功"
      });
    } else {
      app.config.globalProperties.$message({
        type: "error",
        message: res.msg
      });
    }
    load();
  });
};

const handleSizeChange = (newPageSize) => {
  pageSize.value = newPageSize;
  load();
};

const handleCurrentChange = (newPageNum) => {
  currentPage.value = newPageNum;
  load();
};

const onStreetChange = () => {
  console.log('当前选择的街道/镇 是', address.value.selectedStreet);
  address.value.nextVillages = [];
  rcVillages.forEach((element) => {
    if (element.streetCode === address.value.selectedStreet.code) {
      address.value.nextVillages.push(element);
    }
  });
  console.log('已加载此街道所有的村', address.value.nextVillages);
};

const filterHandler = (value, row, column) => {
  let flag = false;
  row.roles.forEach((ele) => {
    if (ele === value) {
      flag = true;
    }
  });
  return flag;
};

load();
</script>

<template>
  <div style="padding: 10px">
    <!-- 功能区域-->
    <div style="margin: 10px 0">
      <el-button type="primary" @click="add">新增</el-button>
      <el-upload action="http://localhost:9090/user/import" :on-success="handleUploadSuccess" :show-file-list=false
        :limit="1" accept='.xlsx' style="display: inline-block; margin: 0 10px">
        <el-button type="primary">导入</el-button>
      </el-upload>
      <el-button type="primary" @click="exportUser">导出</el-button>
    </div>

    <!-- 搜索区域-->
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable></el-input>
      <el-button type="primary" style="margin-left: 5px" @click="load">查询</el-button>
    </div>

    <!-- 用户数据表格 -->
    <el-table v-loading="loading" :data="tableData" border stripe style="width: 100%">
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
      <el-table-column prop="id" label="ID" sortable>
      </el-table-column>
      <el-table-column prop="username" label="用户名">
      </el-table-column>
      <el-table-column prop="nickName" label="昵称">
      </el-table-column>
      <el-table-column prop="age" label="年龄">
      </el-table-column>
      <el-table-column prop="sex" label="性别">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
      <el-table-column label="角色列表" width="300" :filters="[
        { text: '医生', value: '3' },
        { text: '用户', value: '2' },
      ]" :filter-method="filterHandler" prop="role">
        <template #default="scope">
          <el-select v-model="scope.row.roles" multiple placeholder="请选择" style="width: 80%">
            <el-option v-for="item in roles" :key="item.id" :label="item.comment" :value="item.id"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="400">
        <template #default="scope">
          <el-button size="mini" type="primary" @click="handleChange(scope.row)">保存角色信息</el-button>
          <!-- <el-button size="mini" type="success" plain @click="showBooks(scope.row.bookList)">查看图书列表</el-button> -->
          <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <div style="margin: 10px 0">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 模态框 -->
    <el-dialog title="提示" v-model="dialogVisible" width="30%">
      <el-form :model="form" label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model="form.username" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="form.nickName" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="form.sex" label="男">男</el-radio>
          <el-radio v-model="form.sex" label="女">女</el-radio>
          <el-radio v-model="form.sex" label="未知">未知</el-radio>
        </el-form-item>
      </el-form>
      <el-form :model="address" label-width="100px">
        <el-form-item label="地址">
          <el-select v-model="address.area" placeholder="荣成市" disabled>
          </el-select>
          <el-select v-model="address.selectedStreet" placeholder="请选择乡镇/街道" @change="onStreetChange" value-key="code"
            :clearable="true">
            <el-option v-for="(item) in rcStreets" :key="item" :value="item" :label="item.name" />
          </el-select>
          <el-select v-model="address.selectedVillage" placeholder="村委会(非必选)" value-key="code" :clearable="true">
            <el-option v-for="(item) in address.nextVillages" :key="item" :value="item" :label="item.name"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="详细地址">
          <el-input v-model="address.detail" type="textarea" :clearable="true" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-row>
      <Statistics></Statistics>
      <RCMap />
    </el-row>
  </div>
</template>